<template>
    <div class="li">
        <el-row :gutter="50" justify="space-between">
            <el-col :span="16" style="padding: 0px">
                <Header></Header>
                <div class="list">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="进行中" name="1">
                            <div class="lists">
                                <statusTask :type="1" :list="list" @detailurl="detailUrl"></statusTask>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="待审核" name="2">
                            <div class="lists">
                                <statusTask :type="2" :list="list"  @detailurl="detailUrl"
                                            @succtask="succtask" @rejecttask="rejecttask"></statusTask>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="已审核" name="3">
                            <div class="lists">
                                <statusTask :type="1" :list="list"  @detailurl="detailUrl"></statusTask>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="已放弃" name="5">
                            <div class="lists">
                                <statusTask :type="1" :list="list"  @detailurl="detailUrl"></statusTask>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                  <div class="pation">
                      <el-pagination background layout="prev, pager, next" :total="all_total"  @current-change="currentChange">
                      </el-pagination>
                  </div>
                </div>
            </el-col>
            <el-col :span="8" >
                <Right></Right>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import {ref, onMounted, getCurrentInstance, reactive} from 'vue'
    import { getList } from './hook'
    import Header from "@/components/common/header";
    import Right from "@/components/common/right";
    import statusTask from "@/components/common/statusTask";
    import { addExaRecTask } from "@/request/api";
    import {useRoute, useRouter} from "vue-router";
    const state = reactive({
        status: 1,
        list: [],
        total: 0,
        page: 1
    })
    export default {
        name: "Login",
        components: {Header, Right, statusTask},
        setup() {
            const ctx = getCurrentInstance();
            const _this = ctx.appContext.config.globalProperties
            const activeName = ref("2")
            const route = useRoute();
            const router = useRouter();
            let page = ref(1)
            let list = ref([])
            let all_total = ref(null)
            //跳转
            const detailUrl = async (id,title,rec_id = 0) => {
                let path = "user-taskDetail-66";
                router.push({ name: path ,query: { id ,rec_id}});
                // },3000)
            };
            async function currentChange(p) {
                const { data} = await getList(activeName.value, p)
                list.value = data
            }
            async function handleClick({props}){
                activeName.value = props.name
                const {total, data} = await getList(props.name, 1)
                all_total.value = total
                list.value = data
            }
            onMounted(async() => {
                const {total, data} = await getList(activeName.value, 1)
                all_total.value = total
                list.value = data
            })
            const succtask = (id,index) => {
                _this.$confirm("审核通过后奖励即可到账", "您确定要审核该任务吗?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let  params = {
                            status: 3,
                            task_id: id,
                            reason: ''
                        }
                        addExaRecTask(params).then(res => {
                                if (res.ret === 200) {
                                    let tip = '审核成功'
                                    list.value.splice(index,1)
                                    _this.$message.success(tip)
                                } else {
                                    _this.$message.error(res.msg)
                                }

                            });
                    })
            }
            const rejecttask = (id,index) => {
                _this.$prompt('请输入驳回的理由', '提示', {
                    confirmButtonText: '确定驳回',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    if(value == null){
                        _this.$message.error('请输入驳回的理由')
                        return false
                    }
                    let  params = {
                        status: 4,
                        task_id: id,
                        reason: value
                    }
                    addExaRecTask(params).then(res => {
                        if (res.ret === 200) {
                            let tip = '操作成功'
                            list.value.splice(index,1)
                            _this.$message.success(tip)
                        } else {
                            _this.$message.error(res.msg)
                        }

                    });
                })
            }
            return {
                ...{all_total,list,page,currentChange},
                activeName,
                detailUrl,
                handleClick,
                succtask,
                rejecttask,
                state
            };
        }
    };


</script>
<style scoped>
    .list {
        margin-left: 27px;
    }
    .pation {
        text-align: center;
        background: white;
        padding: 15px;
    }
</style>
